<template>
<el-container class="app-wrapper">

      <Header></Header>
  <el-container>
        <Aside :isCollapse="isCollapse"></Aside>

        <Main :isCollapse="isCollapse" :toggleVollapse ="toggleVollapse"></Main>
  </el-container>
</el-container>
</template>

<script>
import Main from "./Main/Main.vue"
import Header from "./Header/Header.vue"
import Aside from "./Aside/Aside.vue"
export default {
data(){
   return{
     isCollapse:false
   } 
},
methods:{
toggleVollapse(){
  this.isCollapse = !this.isCollapse
}
},
components:{
    Main,
    Header,
    Aside
}
}
</script>

<style lang="less" scoped>
.app-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>